<template>
  <div class="interview_detail_item">
    <div class="title">第{{interviewRounds}}轮面试</div>
    <div class="content">
      <div class="interview_message">
        <div class="type">
          <span>类型:</span>
          <span>{{interviewDetailItem.interviewType}}</span>
        </div>
        <div class="time">
          <span>时长:</span>
          <span>{{interviewDetailItem.interviewTime}}</span>
        </div>
      </div>
      <div class="process_desc">
        <span>过程详述:</span>
        <span>{{interviewDetailItem.processDesc}}</span>
      </div>
      <div class="interview_QAs clearfix">
        <span>面试问答:</span>
        <div>
          <div class="QAs" v-for="(QA, QAIndex) in interviewDetailItem.questionList">
            <div class="question">
              <span>问题{{QACounter(QAIndex+1)}}:</span>
              <span>{{QA.question}}</span>
            </div>
            <div class="answer" >
              <span>作者的回答:</span>
              <span>{{QA.answer || '暂无'}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="tips">
        <span>注意事项:</span>
        <span>{{interviewDetailItem.tips}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {numericTypeConverse} from "common/Utils";

  export default {
    name: "InterviewDetailItem",
    props: {
      interviewDetailItem: {
        type: Object,
        default() {
          return {}
        }
      },
      rounds: Number
    },
    computed: {
      interviewRounds() {
        return numericTypeConverse(this.rounds + 1)
      }
    },
    methods: {
      QACounter(index) {
        return numericTypeConverse(index)
      },
    }
  }
</script>

<style scoped>
  .interview_detail_item {
    margin-bottom: 20px;
    padding: 30px;
    background-color: #fafbfc;
    border-radius: 20px;
    font-size: 14px;
    line-height: 1.7;
  }

  .title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
  }

  .content {
    padding: 0 20px;
  }

  .interview_message {
    margin-top: 20px;
    overflow: hidden;
  }

  .interview_message .type {
    float: left;
    margin-right: 40px;
  }

  .interview_message .time {
    float: left;
  }

  .interview_message .type span:nth-child(1),
  .interview_message .time span:nth-child(1),
  .process_desc span:nth-child(1),
  .interview_QAs > span:nth-child(1),
  .tips span:nth-child(1){
    margin-right: 10px;
    font-weight: 700;
  }

  .process_desc {
    margin-top: 20px;
  }

  .interview_QAs {
    margin-top: 20px;
  }

  .interview_QAs > span {
    float: left;
    margin-bottom: 20px;
  }

  .interview_QAs > div {
    float: left;
    width: 925px;
    margin-top: -3px;
    line-height: 1.7;
  }

  .QAs {
    margin-bottom: 10px;
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
  }

  .QAs .question {
    font-weight: 700;
  }

  .QAs .answer span:nth-child(1),
  .QAs .question span:nth-child(1) {
    margin-right: 10px;
  }



  .tips {
    margin-top: 15px;
  }
</style>
